import { defineComponent } from "@/shared/define.js";

export const DCompiler = defineComponent({
  template: html`
    'Month:
    <input
      type="number"
      ng-model="$ctrl.month"
      ng-change="$ctrl.updateDate()"
    />
    Date: {{ $ctrl.date }}
    <d-compiler-item date="$ctrl.date"></d-compiler-item>

    <div>
      <button ng-click="$ctrl.items.push($ctrl.items.length);">Add Item</button>
      <button ng-click="$ctrl.items = []">Reset Items</button>
      <pre>{{ $ctrl.items }}</pre>
      <d-compiler-item2 items="$ctrl.items"></d-compiler-item2>
    </div>
    ${DebugButtonHTML("$ctrl")}
  `,
  controllerAs: "$ctrl",
  controller: class {
    /** @type {string[]} */
    static $inject = ["$scope"];

    date = new Date();

    get month() {
      return this.date.getMonth();
    }

    /** @param {ng.IScope} $scope */
    constructor($scope) {
      this.$scope = $scope;
    }

    updateDate() {
      this.date.setMonth(this.month % 12);
    }

    handleClick() {
      console.log("dCompilerItem", this.$scope);
    }

    /**
     * @type {number[]}
     */
    items = [];

    $onInit() {
      this.items = [1, 2, 3];
    }
  },
});

export const DCompilerItem = defineComponent({
  bindings: { date: "<" },
  controllerAs: "dCompilerItemCtrl",
  template: html`
    <pre>{{ dCompilerItemCtrl.info | json }}</pre>
    ${DebugButtonHTML("dCompilerItemCtrl")}
  `,
  controller: class DCompilerItemController {
    /**
     * @type {string[]}
     */
    static $inject = ["$scope"];

    /**
     * @param {ng.WIScope} $scope
     */
    constructor($scope) {
      this.$scope = $scope;
      /**
       * @type {Date}
       */
      this.date = new Date();
    }

    /**
     * @type {number | undefined}
     */
    previousValue = undefined;

    /**
     * @type {string[]}
     */
    info = [];

    $doCheck() {
      const currentValue = this.date && this.date.valueOf();
      if (this.previousValue !== currentValue) {
        this.info.push(`doCheck: date mutated: ${this.date}`);
        this.previousValue = currentValue;
      }
    }

    handleClick() {
      console.log("dCompilerItem", this.$scope);
    }
  },
});
export const DCompilerItem2 = defineComponent({
  bindings: { items: "<" },
  template: html`
    <pre>{{ dCompilerItemCtrl2.info | json }}</pre>
    ${DebugButtonHTML("dCompilerItemCtrl2")}
  `,
  controllerAs: "dCompilerItemCtrl2",
  controller: class {
    /** @type {string[]} */
    static $inject = ["$scope"];

    /** @param {ng.WIScope} $scope */
    constructor($scope) {
      this.$scope = $scope;
      /**
       * @type {number[]}
       */
      this.items;
    }

    /** @type {string[]} */
    info = [];

    /** @type {number[] | undefined} */
    itemsRef;

    /**
     * @type {number[] | undefined}
     */
    itemsClone;

    $doCheck() {
      if (!Object.is(this.itemsRef, this.items)) {
        this.info.push("doCheck: items changed");
        this.itemsRef = this.items;
      }
      if (!angular.equals(this.itemsClone, this.items)) {
        this.info.push("doCheck: items mutated");
        this.itemsClone = angular.copy(this.items);
      }
    }
  },
});
